<template>
  <div class="app-container">
    input1:<input v-model="input1" /> input2:<el-input
      v-model="input2"
      type="number"
      @input="first = false;"
    />
    {{ JSTEST3 }}
  </div>
</template>

<script>
export default {
  name: "computedtest",
  components: {},
  data() {
    return {
      input1: "1",
      input2: "2",
      first: true
    };
  },
  computed: {
    JSTEST3() {
      if (this.first) return "2";

      let test = this.input2;

      if (test) {
        this.input1 = this.input2 * 20;
      }

      return "2";
    }
  },
  asyncComputed: {
    JSTEST2: {
      get() {
        let test = this.input2;

        if (test) {
          this.input1 = this.input2 * 20;
        }

        return "2";
      },
      // Will update whenever the pageType or postId changes
      // but only if the pageType is not 'index' this way the
      // blogPostContent will be refetched when loading the
      // 'details' and 'edit' pages
      shouldUpdate() {
        return !this.first;
      }
    }
  },
  mounted() {},
  methods: {},
  created() {
    setTimeout(() => {
      this.input2 = 4;

      //this.first = false;

      setTimeout(() => {
        //this.input1 = 1;
        // this.first = false;
        // this.input1 = 1;
      }, 2000);
    }, 1000);
  }
};
</script>

<style lang="less" scoped></style>
